<!-- 材料用量分析 -->
<template>
    <div class="materialUsage">
        <el-row :gutter="20">
            <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
                <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
            </el-col>
            <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
                <div class="container-body">
                    <el-form :inline="true" :model="queryParams" size="small" class="mySearch">
                        <!-- <el-form-item label="拌合楼">
                    <el-select style="width: 160px" v-model="queryParams.stationCode" clearable size="mini"
                        placeholder="请选择拌合楼">
                        <el-option v-for="item in cementListData" :key="item.id" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                        <el-button style="margin: 3px 8px 0 0;" size="mini"
                            :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
                        <el-form-item label="养护基地">
                            <el-input style="width: 140px" v-model="queryParams.baseCode" placeholder="养护基地"
                                clearable></el-input>
                            <!-- <zhjd-select-deptbase v-model="searchForm.baseCode" clearable></zhjd-select-deptbase> -->
                        </el-form-item>
                        <!-- <el-form-item label="项目名称">
                    <el-input style="width: 140px" v-model="queryParams.projectName" placeholder="项目名称"
                        clearable></el-input>
                </el-form-item> -->
                        <el-form-item label="选择时间">
                            <el-select filterable v-model="timeType" style="width: 100px; margin-right: 8px"
                                :popper-append-to-body="false">
                                <el-option label="投产以来" value="all"></el-option>
                                <el-option label="按年" value="year"></el-option>
                                <el-option label="自定义" value="other"></el-option>
                            </el-select>
                            <deatetime v-if="'other' == timeType" ref="deatetime" v-model="queryParams.timeRange">
                            </deatetime>
                            <el-date-picker v-if="'year' == timeType" v-model="queryParams.year" value-format="yyyy"
                                format="yyyy" type="year" placeholder="选择年"> </el-date-picker>

                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
                        </el-form-item>
                        <!-- <div style="float: right">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-download" @click="onExport">导出excel</el-button>
                    </el-form-item>
                </div> -->
                    </el-form>
                    <el-table :data="dataList" show-overflow-tooltip="true" border size="mini" highlight-current-row
                        stripe>
                        <el-table-column prop="countCycle" label="统计周期" align="center" width="120px"></el-table-column>
                        <!-- <el-table-column prop="name" label="养护基地" align="center" :show-overflow-tooltip="true"></el-table-column> -->
                        <el-table-column prop="stationName" label="拌合楼" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="batchWeight" label="沥青混合料产量(吨)" align="center"></el-table-column>
                        <el-table-column prop="asphaltAct" label="沥青用量(吨)" align="center"></el-table-column>
                        <el-table-column prop="gravelAct" label="石料用量(吨)" align="center"></el-table-column>
                        <el-table-column prop="powderAct" label="矿粉用量(吨)" align="center"></el-table-column>
                        <el-table-column prop="recycledMaterialAct" label="再生料用量(吨)" align="center"></el-table-column>
                        <el-table-column label="天然气用量（立方）" align="center"></el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import {
    sysStationList,
    getLastYear,
    asphaltStatisticsMaterial
} from "@/api/bitumenMixingStation/statisticalReport/materialUsage.js";
import deatetime from "@/components/Datetime";
import workSiteLeft from "@/views/components/workSiteLeft";

export default {
    name: 'materialUsage', // 产量统计汇总
    components: { deatetime, workSiteLeft },
    filters: {

    },
    data() {
        return {
            show: true,
            rowObj: {
                T1: 3,
                T2: 24,
                T3: 21,
                T4: 24,
                F1: 0,
                F2: 0,
                F3: 24,
                F4: 24,
            },
            timeType: "all",
            cementListData: [],
            quListData: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                // stationCode: undefined,
                reportType: 'year',
                baseCode: '',
                year: undefined,
                timeRange: [undefined, undefined]
            },
            dataList: [],
            loading: false,
        };
    },
    mounted() {
        this.getCementList();
        this.getLastDayApi()
        // this.getQuList()

    },
    methods: {
        showLeft(show) {
            this.show = !show;
        },
        queryVal(val) {
            this.queryParams.id = val.id;
            // this.handleQuery();
            this.getList();
        },
        // 查询拌合楼下拉列表
        getCementList() {
            sysStationList().then((res) => {
                this.cementListData = res.data || [];
            });
        },

        getList() {
            this.loading = true;
            asphaltStatisticsMaterial(this.queryParams).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
        },
        getSearchParams() {
            let params = {
                reportType: this.queryParams.reportType,
                baseCode: this.queryParams.baseCode
            };

            if (params.reportType === 'year') {
                params.year = this.queryParams.year;
            }
            if (params.reportType === 'other') {
                if (this.queryParams.timeRange && 2 == this.queryParams.timeRange.length) {
                    params['startDate'] = this.queryParams.timeRange[0];
                    params['endDate'] = this.queryParams.timeRange[1];
                }
            }
            return params;
            // const params = {};
            // for (const key in this.queryParams) {
            //     if (key === "time") {
            //         const time = this.queryParams[key];
            //         if (time && time.length === 2) {
            //             params.startTime = time[0];
            //             params.endTime = time[1];
            //         }
            //     } else {
            //         params[key] = this.queryParams[key];
            //     }
            // }
            // return params;
        },
        // 查询时间
        getLastDayApi() {
            getLastYear().then((res) => {
                if (!!res.data) {
                    this.timeType = 'year';
                    this.queryParams['year'] = res.data.substring(0, 4);
                }
                this.getList();
            });
        },
        /*** 数据导出*/
        onExport() {
            this.$message.info('正在开发中~~~~')
            // api
            //     .exportExcel(this.searchParams)
            //     .then((res) => {
            //         const blob = new Blob([res]);
            //         var href = window.URL.createObjectURL(blob);
            //         var downloadElement = document.createElement('a');
            //         downloadElement.href = href;
            //         downloadElement.download = decodeURIComponent('产量统计汇总.xls');
            //         document.body.appendChild(downloadElement);
            //         downloadElement.click();
            //         document.body.removeChild(downloadElement);
            //         window.URL.revokeObjectURL(href);
            //     })
            //     .catch(() => { });
        }
    }
};
</script>
  
<style scoped lang="scss" >
.materialUsage {
    padding: 16px;
}
</style>
  